<template>
    <div id="home">
        <AdminHeader></AdminHeader>
        <AdminSidebar></AdminSidebar>
        <div class="content_box" :class="{ content_collapse: collapse }">
            <AdminTabs></AdminTabs>
            <div class="content_main" id="content_main">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import AdminHeader from "@/components/layout/AdminHeader.vue";
import AdminSidebar from "@/components/layout/AdminSidebar.vue";
import AdminTabs from "@/components/layout/AdminTabs.vue";
import { useWebStore } from "@/stores";
import { computed } from "vue";

const webStore = useWebStore()
const collapse = computed(() => webStore.collapse);

</script>

<style lang="less" scoped>
#home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #ebf1f6;
  position: relative;

  .content_box {
    position: absolute;
    left: 202px;
    right: 0;
    top: 51px;
    bottom: 0;
    transition: left 0.3s ease-in-out;
  }

  .content_main {
    width: auto;
    min-width: 1100px;
    height: calc(100vh - 91px);
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 2px;
  }

  .content_collapse {
    left: 67px;
  }
}
</style>